<template>
  <div>
    <!-- 标题开始 -->
    <van-nav-bar title="母婴专区" @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" color="#000" size="22" />
      </template>
      <template #right>
        <van-cell title="分享" @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </template>
    </van-nav-bar>
    <!-- 标题结束 -->
    <!-- 选项卡开始 -->
    <van-tabs type="line">
      <van-tab title="1-2岁">
        <div>
          <img src="../assets/icon/chail1.jpg" alt="" class="img" />
          <span class="title"
            >1-2岁的宝宝身体发育已慢慢成熟，随着宝宝慢慢的会走，会说话，他们对这个世界的好奇与探索也随之增长，这一阶段的宝宝要特别注重饮食搭配，否则会出现营养不良的状况哦~保持食物的多样性，适当添加趣味性，满足宝宝的好奇心，不用过分担心宝宝的喜好选择，当宝宝性形成自己的饮食习惯，均衡营养，就再也不用害怕宝宝挑食啦~</span
          >
        </div>
        <!-- 内容开始 -->
        <van-card
          centered
          v-for="(item, index) of baby"
          :key="index"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.image"
        />
        <!-- 内容结束 -->
      </van-tab>
      <van-tab title="2-3岁">
        <div>
          <img src="../assets/icon/chail2.jpg" class="img" />
          <span class="title"
            >宝宝长大啦！已经不是小婴儿的宝宝这个阶段已经可以独立吃饭了，乳牙也长到了20颗左右，现在的食物形态应当有细丝、薄片、小丁等各种形状，米饭、软软的面条也都是很好的选择，这时更要注重饮食的多样化，避免宝宝挑食呦~</span
          >
        </div>
        <van-card
          centered
          v-for="(item, index) of baby"
          :key="index"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.image"
        />
      </van-tab>
      <van-tab title="3岁以上">
        <div>
          <img src="../assets/icon/chail3.jpg" class="img" />
          <span class="title"
            >经过三岁前妈妈对宝宝精心的喂养，宝宝的消化能力与咀嚼能力日趋完善，这一阶段的宝宝饮食范围应更加扩大，粗粮等食物也应进入宝宝的食谱，增加多种食物元素，增加烹饪方式，让宝宝能够摄入足够营养来生长发育。宝宝吃对了，才会长得好，更聪明~</span
          >
        </div>
        <van-card
          centered
          v-for="(item, index) of baby"
          :key="index"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.image"
        />
      </van-tab>
      <van-tab title="不爱吃蔬菜">
        <div>
          <img src="../assets/icon/chail4.jpg" class="img" />
          <span class="title"
            >宝宝的味蕾很敏感，往往大人们吃起来清甜的蔬菜，对宝宝来说却是“苦不堪言”。那么如何做出吸引宝宝又适合他们口味的蔬菜美食呢？解锁蔬菜辅食制作技能，收获健康成长的开心宝宝~</span
          >
        </div>
        <van-card
          centered
          v-for="(item, index) of baby"
          :key="index"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.image"
        />
      </van-tab>
    </van-tabs>
    <!-- 选项卡结束 -->
    <div style="height: 3rem"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      baby: [
        {
          title: "蔬菜鸡蛋丸子【宝宝辅食食谱】",
          desc:
            "10个月以上 面条掰的碎碎的，既能当主食，还照顾到了宝宝们的咀嚼能力，混合到一起蒸熟",
          image: require("../assets/image/200_4bb44dc343a28b72dc48c6eeed7006f8.gif"),
        },
        {
          title: "宝宝糖醋里脊 宝宝辅食食谱",
          desc:
            "糖醋里脊作为每次下馆子都忍不住点的一道经典菜肴，其实各地的做法都有很多，但我这份，是不油炸，也不放过多调味料的宝宝口味。",
          image: require("../assets/image/200_1658acc4276a2206f934f7a1946f24fa.jpg"),
        },
        {
          title: "山药手指饼【宝宝辅食】",
          desc:
            "口感是非常软糯的，带着玉米颗粒也很好吃，虽然是把主食做成了零食的造型，但好在味道上面宝宝同样买账，这也算是一种不错的营养摄入方法了吧",
          image: require("../assets/image/200_a35d34465758a7a4eada7f126513713d.jpg"),
        },
        {
          title: "西蓝花奶酪饼【宝宝辅食食谱】",
          desc: "让孩子长高，增加抵抗力，把握好时机，这个一定要做！",
          image: require("../assets/image/200_ffd2dde77905cfae7e508d79c95303c0.jpg"),
        },
        {
          title: "鸡蛋土司香蕉卷,宝宝辅食、营养早餐、甜蜜下午茶",
          desc: "软糯可口，老少皆宜",
          image: require("../assets/image/200_04ba428cd518a65c1ca7f0f6fd2393be.jpg"),
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      //跳转回首页
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>
<style scoped>
.van-tab {
  font-size: 13px;
}
.img {
  width: 90%;
  margin: 10px 17px;
  border-radius: 5px;
}
.title {
  display: inline-block;
  width: 340px;
  margin: 0px 12px;
  font-size: 14px;
  text-align: left;
  line-height: 24px;
  text-indent: 20px;
}
.matter {
  display: inline-block;
  width: 100%;
}
.delte {
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
